import React from 'react';

interface ChartData {
  label: string;
  value: number;
  color?: string;
}

interface SimpleBarChartProps {
  data: ChartData[];
  title?: string;
  className?: string;
}

export const SimpleBarChart: React.FC<SimpleBarChartProps> = ({
  data,
  title,
  className = ''
}) => {
  const maxValue = Math.max(...data.map(d => d.value));

  return (
    <div className={`bg-white p-6 rounded-lg shadow-md ${className}`}>
      {title && (
        <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
      )}
      
      <div className="space-y-3">
        {data.map((item, index) => (
          <div key={index} className="flex items-center">
            <div className="w-20 text-sm text-gray-600 truncate">
              {item.label}
            </div>
            
            <div className="flex-1 mx-3">
              <div className="bg-gray-200 rounded-full h-4 relative overflow-hidden">
                <div
                  className="h-full rounded-full transition-all duration-500 ease-out"
                  style={{
                    width: `${(item.value / maxValue) * 100}%`,
                    backgroundColor: item.color || '#3B82F6'
                  }}
                />
              </div>
            </div>
            
            <div className="w-12 text-sm text-gray-700 text-right">
              {item.value}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

interface SimplePieChartProps {
  data: ChartData[];
  title?: string;
  className?: string;
}

export const SimplePieChart: React.FC<SimplePieChartProps> = ({
  data,
  title,
  className = ''
}) => {
  const total = data.reduce((sum, item) => sum + item.value, 0);
  let currentAngle = 0;

  const slices = data.map((item, index) => {
    const percentage = (item.value / total) * 100;
    const angle = (item.value / total) * 360;
    const startAngle = currentAngle;
    currentAngle += angle;

    // 生成SVG路径
    const x1 = 50 + 40 * Math.cos((startAngle * Math.PI) / 180);
    const y1 = 50 + 40 * Math.sin((startAngle * Math.PI) / 180);
    const x2 = 50 + 40 * Math.cos((currentAngle * Math.PI) / 180);
    const y2 = 50 + 40 * Math.sin((currentAngle * Math.PI) / 180);
    
    const largeArc = angle > 180 ? 1 : 0;
    const pathData = [
      'M', 50, 50,
      'L', x1, y1,
      'A', 40, 40, 0, largeArc, 1, x2, y2,
      'Z'
    ].join(' ');

    return {
      ...item,
      percentage,
      pathData,
      color: item.color || `hsl(${(index * 360) / data.length}, 70%, 50%)`
    };
  });

  return (
    <div className={`bg-white p-6 rounded-lg shadow-md ${className}`}>
      {title && (
        <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
      )}
      
      <div className="flex items-center">
        <div className="w-32 h-32">
          <svg viewBox="0 0 100 100" className="w-full h-full">
            {slices.map((slice, index) => (
              <path
                key={index}
                d={slice.pathData}
                fill={slice.color}
                stroke="white"
                strokeWidth="1"
                className="hover:opacity-80 transition-opacity"
              />
            ))}
          </svg>
        </div>
        
        <div className="ml-6 flex-1">
          <div className="space-y-2">
            {slices.map((slice, index) => (
              <div key={index} className="flex items-center text-sm">
                <div
                  className="w-3 h-3 rounded-full mr-2"
                  style={{ backgroundColor: slice.color }}
                />
                <span className="text-gray-700 flex-1">{slice.label}</span>
                <span className="text-gray-500">
                  {slice.percentage.toFixed(1)}%
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

interface SimpleLineChartProps {
  data: { x: string; y: number }[];
  title?: string;
  className?: string;
}

export const SimpleLineChart: React.FC<SimpleLineChartProps> = ({
  data,
  title,
  className = ''
}) => {
  const maxY = Math.max(...data.map(d => d.y));
  const minY = Math.min(...data.map(d => d.y));
  const range = maxY - minY || 1;

  // 生成SVG路径点
  const points = data.map((point, index) => {
    const x = (index / (data.length - 1)) * 280 + 10; // 10px padding
    const y = 150 - ((point.y - minY) / range) * 120 + 10; // 倒置Y轴，10px padding
    return `${x},${y}`;
  }).join(' ');

  return (
    <div className={`bg-white p-6 rounded-lg shadow-md ${className}`}>
      {title && (
        <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
      )}
      
      <div className="relative">
        <svg viewBox="0 0 300 160" className="w-full h-40">
          {/* 网格线 */}
          <defs>
            <pattern id="grid" width="30" height="30" patternUnits="userSpaceOnUse">
              <path d="M 30 0 L 0 0 0 30" fill="none" stroke="#E5E7EB" strokeWidth="1"/>
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#grid)" />
          
          {/* 数据线 */}
          <polyline
            fill="none"
            stroke="#3B82F6"
            strokeWidth="2"
            points={points}
          />
          
          {/* 数据点 */}
          {data.map((point, index) => {
            const x = (index / (data.length - 1)) * 280 + 10;
            const y = 150 - ((point.y - minY) / range) * 120 + 10;
            return (
              <circle
                key={index}
                cx={x}
                cy={y}
                r="3"
                fill="#3B82F6"
                className="hover:r-4 transition-all"
              />
            );
          })}
        </svg>
        
        {/* X轴标签 */}
        <div className="flex justify-between mt-2 text-xs text-gray-500">
          {data.map((point, index) => (
            <span key={index} className={index % 2 === 0 ? '' : 'opacity-0'}>
              {point.x}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
};